<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import md5 from 'md5';
import ajax from '../utils/request'

import { loginFn } from '../api/user'

export default {
  name: 'login',
  data() {
    return {
      adminname: '',
      password: ''
    }
  },
  methods: {
    loginClick() {

      /*
        1. 先获取账号和密码
        2. 对账号和密码做验证
        3. 对密码进行加密处理
        4. 将账号和密码发送给后端，来判断是否登录成功
      */


      // 验证账号密码长度
      // if (this.adminname.length < 6 || this.password.length < 6) {
      //   ElMessage.error('账号密码长度不能少于 6 位！')
      //   return
      // }

      // 验证密码是否符合条件
      // if (!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)) {
      //   ElMessage.error('密码应至少包含一个大写、一个小写、一个数字、和一个特殊符号组成的 6 位密码！')
      //   return
      // }

      // 将密码加密
      // 我们需要将用户输入的内容做一些特殊处理，然后再进行加密，我们注册和登录时的加密规则要是一模一样的
      // 将加密后的内容发送给后端即可
      // console.log(md5('千锋123杭州@$&'));


      // 将用户输入的账号密码发送给服务器了，来进行验登录结果
      // axios.post('http://121.89.205.189:3000/admin/admin/login', {
      //   adminname: this.adminname,
      //   password: this.password
      // }).then(res => {
      //   console.log(res);
      // }).catch(err => { })
      //   .finally(info => { })


      // ajax({
      //   url: '/admin/login',
      //   method: 'PosT',
      //   data: {
      //     adminname: this.adminname,
      //     password: this.password
      //   }
      // }).then(res => {
      //   console.log(res);
      // })

      // 直接调用方法发送请求
      loginFn({
        adminname: this.adminname,
        password: this.password
      }).then(res => {
        console.log(111111, res);
      })

    }
  }
}
</script>

<template>
  <div class="container">
    <div class="form">
      <h2>系统登录</h2>
      <el-input v-model="adminname" placeholder="请输入管理员账号" />
      <el-input v-model="password" class="psw" placeholder="请输入管理员密码" />
      <el-button @click="loginClick" type="success">登 录</el-button>

    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-color: aquamarine;


  .form {
    width: 360px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 30px 20px 30px;
    border-radius: 10px;

    h2 {
      text-align: center;
    }

    .psw {
      margin: 20px 0;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>